<template>
	<view class="main">
		<!--公共头部-->
		<my-header :background="background" :is-back="true" title="添加合作伙伴"></my-header>

		<view class="main-body-e">
			<u-form :model="form" ref="uForm">
				<!--所属账本-->
				<view>
					<u-form-item :required="true" label-width="70px" label="所属账本：" prop="accountBookName"
						:border-bottom="false">
						<u-input v-model="form.accountBookName" placeholder="请选择账本" placeholder-style="font-size:11px;"
							type="select" :select-open="zhangbenShow" :border="true" @click="zhangbenShow = true" />
						<u-select v-model="zhangbenShow" mode="mutil-column-auto" :list="zhangbenList"
							@confirm="zhangbenCallback"></u-select>
					</u-form-item>
				</view>
				<!--门店名称-->
				<view>
					<view>
						<u-form-item :required="true" label-width="70px" label="门店名称：" prop="name">
							<u-input placeholder="请输入门店名称" placeholder-style="font-size:11px;" v-model="form.name" :clearable="false"/>
						</u-form-item>
					</view>
				</view>
				<!--门店地址-->
				<view>
					<view>
						<u-form-item :required="true" label-width="70px" label="门店地址：" prop="name">
							<u-input placeholder="请输入门店地址" placeholder-style="font-size:11px;" v-model="form.name1" :clearable="false"/>
						</u-form-item>
					</view>
				</view>
				<!--联系人-->
				<view class="dis_flex jus-con ali-ite">
					<view>
						<u-form-item :required="true" label-width="70px" label="联系人：" prop="name">
							<u-input placeholder=" " v-model="form.otherPay" :custom-style="jinengStyle"
								:clearable="false" />
						</u-form-item>
					</view>
					<view>
						<u-form-item :required="true" label-width="50px" label="电话：" prop="name">
							<u-input placeholder=" " v-model="form.otherPay_explain" :custom-style="jinengStyle"
								:clearable="false" />
						</u-form-item>
					</view>
				</view>
				<!--负责人-->
				<view class="dis_flex jus-con ali-ite">
					<view>
						<u-form-item :required="true" label-width="70px" label="负责人：" prop="name">
							<u-input placeholder=" " v-model="form.otherPay2" :custom-style="jinengStyle"
								:clearable="false" />
						</u-form-item>
					</view>
					<view>
						<u-form-item :required="true" label-width="50px" label="电话：" prop="name">
							<u-input placeholder=" " v-model="form.otherPay_explain2" :custom-style="jinengStyle"
								:clearable="false" />
						</u-form-item>
					</view>
				</view>
				<!--门店地址-->
				<view>
					<view>
						<u-form-item :required="true" label-width="70px" label="协议期：" prop="name">
							<u-input @click="show = true" placeholder="20 - - 至 20 - -" placeholder-style="font-size:11px;" v-model="form.rlTime" :disabled="true" :clearable="false"/>
						</u-form-item>
					</view>
				</view>
				<!--合作模式-->
				<view>
					<u-form-item :required="true" label-width="70px" label="合作模式：" prop="H9" :border-bottom="false">
						<u-input placeholder="请选择模式" placeholder-style="font-size:11px;" v-model="form.H9" type="select" :select-open="zhijiShow" :border="true" @click="zhijiShow = true" />
						<u-select v-model="zhijiShow" mode="mutil-column-auto" :list="zhijiList" @confirm="zhijiCallback"></u-select>
					</u-form-item>
				</view>
				<view style="margin: auto;width: 70%;">
					<view style="width:200px;">
						<u-form-item label-width="70px" label="进场费：" prop="name" :border-bottom="false">
							<u-input :custom-style="jinchangStyle" :border="true" placeholder=" " placeholder-style="font-size:11px;" v-model="form.name2"/>
						</u-form-item>
					</view>
				</view>
				<view style="margin: auto;width: 70%;">
					<view style="width:200px;">
						<u-form-item label-width="70px" label="租金：" prop="name" :border-bottom="false">
							<u-input :custom-style="jinchangStyle" :border="true" placeholder=" " placeholder-style="font-size:11px;" v-model="form.name3"/>
						</u-form-item>
					</view>
				</view>
				<view style="margin: auto;width: 70%;">
					<view style="width:200px;">
						<u-form-item label-width="70px" label="押金：" prop="name" :border-bottom="false">
							<u-input :custom-style="jinchangStyle" :border="true" placeholder=" " placeholder-style="font-size:11px;" v-model="form.name4"/>
						</u-form-item>
					</view>
				</view>
				<view style="margin: auto;width: 70%;">
					<view style="width:200px;">
						<u-form-item label-width="70px" label="分成比例：" prop="name" :border-bottom="false">
							<u-input :custom-style="jinchangStyle" :border="true" placeholder=" " placeholder-style="font-size:11px;" v-model="form.name5"/>
						</u-form-item>
					</view>
				</view>
				<view style="margin: auto;width: 70%;">
					<view style="width:200px;">
						<u-form-item label-width="70px" label="预付款：" prop="name" :border-bottom="false">
							<u-input :custom-style="jinchangStyle" :border="true" placeholder=" " placeholder-style="font-size:11px;" v-model="form.name6"/>
						</u-form-item>
					</view>
				</view>
				<!--协议期日历-->
				<view><u-calendar v-model="show" :mode="mode" @change="change"></u-calendar></view>
				<view class="address" style="margin:30rpx 0 0rpx 0;">
					<button @click="cancel()" type="warn">取消</button>
					<button @click="submit()" style="background:#0051BA" type="primary">提交</button>
				</view>
				<view style="margin-top:20px;">
					<text style="color:red;">温馨提示：红色星为必填项，</text>
					<text style="color:#0051BA;">蓝色星为选填项</text>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	export default {
		data() {
			return {
				background	: {
					backgroundColor: ' ',
				},
				zhijiList: [
					{label:'租金',value:1},
					{label:'分成',value:2},
					{label:'预付分成',value:3},
					{label:'进场费&分成',value:4},
					{label:'进场费&租金',value:5},
				],
				zhijiShow:false,
				show:false,
				mode: 'range' ,
				form : {
					accountBook: '', // 所属账本
					rlTime: '', // 协议期
					H9: '', // 合作模式
				},
				zhangbenShow : false,
				zhangbenList: [],
				jinchangStyle : {
					width: '70px',
				},
				jinengStyle : {
					borderBottom:'1px solid #ccc',
				},
			}
		},
		components: {
			myHeader,
		},
		onLoad() {
			this.load();
			this.onSelect();
		},
		methods:{
			// 合作模式
			zhijiCallback(e){
				console.log(e)
				this.form.H9 = e[0].label
			},
			// 协议期选择事件
			change(e) {
				this.form.rlTime = e.startDate + ' 至 ' + e.endDate
			},
			// 所属账本事件
			zhangbenCallback(e) {
				this.form.accountBookName = e[0].label
				this.form.accountBook = e[0].value
				console.log(e)
			},
			// 首次查询事件
			async onSelect() {
				let res = await this.asyncPublic('/finance/financeAddWagesOnSelect', 1)
				this.zhangbenList = res.data.account
				this.load_close();
			},
		},
	}
</script>

<style>
	.address {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.address button {
		font-size: 13px;
		width: 140px;
		border-radius: 20px;
	}
	/*表单字体调整*/
	.u-form-item {
		padding: 5px !important;
	}
	.u-input--border {
		height: 60rpx !important;
	}
	.u-input__input {
		font-size: 22rpx !important;
		min-height: 60rpx !important;
	}
</style>
